import * as React from 'react';
const Autocomplete = require('react-autocomplete');

import { Track } from '../containers/types';

export interface SearchProps {
  autoCompleteValue: string;
  tracks: Array<Track>;
  handleSelect: Function;
  handleChange: Function;
}

export default class Search extends React.Component<SearchProps, {}> {
  render() {
    return (
      <div className="search">
        {/*Autocomplete usage with value and behavior handled via this.props*/}
        <Autocomplete
          inputProps={{ title: 'Title' }}
          value={this.props.autoCompleteValue}
          items={this.props.tracks}
          getItemValue={(item: Track) => item.title}
          onSelect={this.props.handleSelect}
          onChange={this.props.handleChange}
          renderItem={this.handleRenderItem}
        />
      </div>
    );
  }

  handleRenderItem = (item: {id: string, title: string}, isHighlighted: boolean) => {
    // Some basic style
    const listStyles = {
      item: {
        padding: '2px 6px',
        cursor: 'default'
      },

      highlightedItem: {
        color: 'white',
        background: '#F38B72',
        padding: '2px 6px',
        cursor: 'default'
      }
    };

    // Render list items
    return (
      <div
        style={isHighlighted ? listStyles.highlightedItem : listStyles.item}
        key={item.id}
        id={item.id}
      >
        {item.title}
      </div>
    );
  }
}
